<template>
	<view class="all">
		<view class="white">
			<view class="item">
				<view class="title">
					注销后，您将放弃以下权益：
				</view>
				<view class="container">
					<text>1.您的所有交易记录将被清空，请确保所有交易已完结且无纠纷，账号注销后因历史交易可能产生的相关资金退回等权益将视作自动放弃。</text>
					<br>
					<text>2.您的身份信息、账号信息、订单记录将被清空且无法恢复。</text>
					
				</view>
			</view>
			<view class="item" style="margin: 30rpx 0;">
				<view class="title">
					注销前，我们将进行以下验证：
				</view>
				<view class="container">
					<text>1.账号近期不存在未完结的交易。</text>
					<br>
					<text>2.账号相关财产权益都已结清。</text>
					
				</view>
			</view>
		</view>
		<view class="agreen">
			<view class="radios" @click="changeAgreen">
				<image style="width: 20px;height: 20px;" v-show="!this.beAgreen" src="/static/img/select.png" alt="" width="100%" height="100%">
				<image style="width: 20px;height: 20px;" v-show="this.beAgreen" src="/static/img/selected.png" alt="" width="100%" height="100%">
			</view>
			<view class="texts">
				阅读并同意<text class="txts" >《账户注销重要提醒》</text>
			</view>
		</view>
		<view class="btns2" v-show="!this.beAgreen">
			确认注销
		</view>
		<view class="btns" v-show="this.beAgreen" @click="destoryed()">
			确认注销
		</view>
	</view>
</template>

<script>
	import{clientCloseAnAccount} from'@/utils/api.js'
	export default {
		data() {
			return {
				beAgreen:false
			};
		},
		methods:{
			changeAgreen(){
				this.beAgreen=!this.beAgreen
			},
			destoryed(){
				clientCloseAnAccount().then(res=>{
					if (res.data.meta.status == 200) {
						uni.showToast({
							title: res.data.meta.msg,
							icon: 'none'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/login/login'
							})
						},1000)
					} else {
						uni.showToast({
							title: res.data.meta.msg,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.all{
	height: 100%;
	position: relative;
	.white{
		margin-top: 5rpx;
		background-color: #ffffff;
		padding: 0 24rpx 40rpx 24rpx;
		.item{
			.title{
				height: 110rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #5398F6;
				line-height: 110rpx;
			}
			.container{
				line-height: 50rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #242424;
			}
		}
	}
	.agreen{
		display: flex;
		font-size: 28rpx;
		padding: 40rpx 30rpx;
			.radios{
				width: 28px;
				height: 20px;
				margin-right:5px ;
			}
			.texts{
				color: #686868;
				.txts{
					color:#5398F6;
				}
			}
		
	}
	.btns {
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		// top: 0;
		bottom: 100px;
		text-align: center;
		width: 231px;
		height: 44px;
		border-radius: 22px;
		background-color: #5398F6;
		line-height: 44px;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: bold;
	}
	.btns2 {
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		// top: 0;
		bottom: 100px;
		text-align: center;
		width: 231px;
		height: 44px;
		border-radius: 22px;
		background-color: #A8A8A8;
		line-height: 44px;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: bold;
	}
}
</style>
